<%--
  Created by IntelliJ IDEA.
  User: 123
  Date: 2020/11/17
  Time: 20:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<a href="${pageContext.request.contextPath}/add.jsp">添加学员</a>
<table border="1" align="center">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>操作</td>
    </tr>
</table>
<div id="page">

</div>

<%--发出ajax请求--%>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function doAjax(pageNo){
        $.ajax({
            url:"${pageContext.request.contextPath}/students/"+pageNo,
            type:"get",
            dataType:"json",//让jquery的ajax帮助我们把data字符串转换为json对象
            success:function(data){
                //去除老数据
                $("tr:gt(0)").remove();
                //遍历data，把数据解析到table表格
                for(var i=0;i<data.list.length;i++){
                    var stu=data.list[i];
                    //把数据填充到table表格里面
                    $("table").append("<tr>\n" +
                        "            <td>"+stu.id+"</td>\n" +
                        "            <td>"+stu.name+"</td>\n" +
                        "            <td><a href='javascript:void(0)' onclick='deleteStu(this,"+stu.id+")'>删除</a>" +
                        "        </tr>");
                }
                //要在div里面填写上一页和下一页的超链接
                var html="";
                if(data.hasPreviousPage){
                    html="<a href='javascript:void(0)' onclick='doAjax("+data.prePage+")'>上一页</a>"
                }
                if(data.hasNextPage){
                    html+="<a href='javascript:void(0)' onclick='doAjax("+data.nextPage+")'>下一页</a>"
                }
                $("#page").html(html);
            }
        });
    }
    doAjax(1);//发出ajax请求请求第一页数据。
    function deleteStu(obj,id){
        $.ajax({
            url:"${pageContext.request.contextPath}/student_delete",
            type:"post",
            data:"stu.id="+id,
            success:function(data){
                $(obj).parent().parent().remove();
            }
        });
    }
</script>
</body>
</html>
